<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    
    <!-- 富文本编辑器 -->
	<link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>
    <script src="../js/vuejs-2.5.16.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/vue-select.js"></script>
</head>
<body class="hold-transition skin-red sidebar-mini">
<div id="app">

            <!-- 正文区域 -->
            <section class="content">

                <div class="box-body">

                    <!--tab页-->
                    <div class="nav-tabs-custom">

                        <!--tab头-->
                        <ul class="nav nav-tabs">                       		
                            <li class="active">
                                <a href="#home" data-toggle="tab">商品基本信息</a>                                                        
                            </li>   
                            <li >
                                <a href="#pic_upload" data-toggle="tab">商品图片</a>                                                        
                            </li>    
                            <li >
                                <a href="#customAttribute" data-toggle="tab">扩展属性</a>                                                        
                            </li>     
                            <li >
                                <a href="#spec" data-toggle="tab" >规格</a>                                                        
                            </li>                       
                        </ul>
                        <!--tab头/-->
						
                        <!--tab内容-->
                        <div class="tab-content">

                            <!--表单内容-->
                            <div class="tab-pane active" id="home">
                                <div class="row data-type">                                  
								   <div class="col-md-2 title">商品分类</div>
		                          
		                           	  <div class="col-md-10 data">
		                           	  	<table>
                                            <tr>
                                                <td>
                                                    <select class="form-control" v-model="entity.goods.category1Id">
                                                        <option v-for="itemCat in itemCatList1" :value="itemCat.id">{{itemCat.name}}</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <select class="form-control" v-model="entity.goods.category2Id">
                                                        <option v-for="itemCat in itemCatList2" :value="itemCat.id">{{itemCat.name}}</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <select class="form-control" v-model="entity.goods.category3Id">
                                                        <option v-for="itemCat in itemCatList3" :value="itemCat.id">{{itemCat.name}}</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    模板ID:{{entity.goods.typeTemplateId}}
                                                </td>
                                            </tr>
		                           	  	</table>
		                              	
		                              </div>


                                    <div class="col-md-2 title">商品名称</div>
                                    <div class="col-md-10 data">
                                        <input type="text" v-model="entity.goods.goodsName" class="form-control" placeholder="商品名称"
                                               value="">
                                    </div>

                                    <div class="col-md-2 title">品牌</div>
                                    <div class="col-md-10 data">
                                        <select class="form-control" v-model="entity.goods.brandId">
                                            <option v-for="brand in brandList" :value="brand.id">{{brand.text}}</option>
                                        </select>
                                    </div>

                                    <div class="col-md-2 title">副标题</div>
                                    <div class="col-md-10 data">
                                        <input type="text" v-model="entity.goods.caption" class="form-control" placeholder="副标题"
                                               value="">
                                    </div>

                                    <div class="col-md-2 title">价格</div>
                                    <div class="col-md-10 data">
                                        <div class="input-group">
                                            <span class="input-group-addon">¥</span>
                                            <input type="text" v-model="entity.goods.price" class="form-control" placeholder="价格">
                                        </div>
                                    </div>

                                    <div class="col-md-2 title editer">商品介绍</div>
                                    <div class="col-md-10 data editer">
                                <textarea name="content" v-model="entity.goodsDesc.introduction"
                                          style="width:800px;height:400px;visibility:hidden;"></textarea>
                                    </div>

                                    <div class="col-md-2 title rowHeight2x">包装列表</div>
                                    <div class="col-md-10 data rowHeight2x">
                                <textarea rows="4" v-model="entity.goodsDesc.packageList" class="form-control"
                                          placeholder="包装列表"></textarea>
                                    </div>

                                    <div class="col-md-2 title rowHeight2x">售后服务</div>
                                    <div class="col-md-10 data rowHeight2x">
                                <textarea rows="4" v-model="entity.goodsDesc.saleService" class="form-control"
                                          placeholder="售后服务"></textarea>
                                    </div>
                                </div>
                            </div>

                            <!--图片上传-->
                            <div class="tab-pane" id="pic_upload">
                                <div class="row data-type">                                  
								 <!-- 颜色图片 -->
								 <div class="btn-group">
					                 <button @click="image_entity={url:'',color:''}" type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>
					             </div>
								 
								 <table class="table table-bordered table-striped table-hover dataTable">
					                    <thead>
					                        <tr>
											    <th class="sorting">颜色</th>
											    <th class="sorting">图片</th>
											    <th class="sorting">操作</th>
							            </thead>
					                    <tbody>
					                      <tr v-for="(imageEntity, index) in entity.goodsDesc.itemImages">
					                            <td>{{imageEntity.color}}</td>
									            <td>
									           		<img :src="imageEntity.url" width="100px" height="100px">
									            </td>
									            <td>
                                                    <button @click="delete_image_entity(index)" type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
									            </td>
					                      </tr>
					                    </tbody>
								 </table> 
								  
                                </div>
                            </div>

                            <!--扩展属性-->
                            <div class="tab-pane" id="customAttribute">
                                <div class="row data-type">
                                    <div v-for="cai in entity.goodsDesc.customAttributeItems">
                                        <div class="col-md-2 title">{{cai.text}}</div>
                                        <div class="col-md-10 data">
                                            <input class="form-control" v-model="cai.value" :placeholder="cai.text">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!--规格-->
                            <div class="tab-pane" id="spec">
                                <div class="row data-type">
                                    <div class="col-md-2 title">是否启用规格</div>
                                    <div class="col-md-10 data">
                                        <input v-model="entity.goods.isEnableSpec" :true-value="1" :false-value="0" type="checkbox" >
                                    </div>
                                </div>
                                <p>

                                <div v-show="entity.goods.isEnableSpec==1">

                                    <div class="row data-type">

                                        <div v-for="spec in specList">
                                            <div class="col-md-2 title">{{spec.text}}</div>
                                            <div class="col-md-10 data">

					                            <span v-for="specOption in spec.options">
					                            	<input :id="specOption.id" type="checkbox" :checked="checkAttributeValue(spec.text, specOption.optionName)"
                                                            @click="selectSpec($event, spec.text, specOption.optionName)">
                                                    <label :for="specOption.id">{{specOption.optionName}}</label>&nbsp;&nbsp;
					                            </span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row data-type">
                                        <table class="table table-bordered table-striped table-hover dataTable">
                                            <thead>
                                            <tr>
                                                <th v-for="specItem in entity.goodsDesc.specificationItems" class="sorting">{{specItem.attributeName}}</th>
                                                <th class="sorting">价格</th>
                                                <th class="sorting">库存</th>
                                                <th class="sorting">是否启用</th>
                                                <th class="sorting">是否默认</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="item in entity.itemList">
                                                <td v-for="specItem in entity.goodsDesc.specificationItems">
                                                    {{item.spec[specItem.attributeName]}}
                                                </td>
                                                <td>
                                                    <input class="form-control" v-model="item.price"  placeholder="价格">
                                                </td>
                                                <td>
                                                    <input class="form-control" v-model="item.num" placeholder="库存数量">
                                                </td>
                                                <td>
                                                    <input disabled v-model="item.status" :checked="0" :true-value="1" :false-value="0" type="checkbox" >
                                                </td>
                                                <td>
                                                    <input v-model="item.isDefault" :true-value="1" :false-value="0" type="checkbox" >
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>

                                    </div>

                                </div>
                            </div>
                            
                        </div>
                        <!--tab内容/-->
						<!--表单内容/-->
							 
                    </div>
                 	
                 	
                 	
                 	
                   </div>
                  <div class="btn-toolbar list-toolbar">
				      <button class="btn btn-primary" @click="save()"><i class="fa fa-save"></i>保存</button>
                      <a href="goods.html" class="btn btn-default">返回列表</a>
				  </div>
			
            </section>
            
            
<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabelPic" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabelPic">上传商品图片</h3>
		</div>
		<div class="modal-body">
			<table class="table table-bordered table-striped">
		      	<tr>
		      		<td>颜色</td>
		      		<td><input  class="form-control" placeholder="颜色" v-model="image_entity.color">  </td>
		      	</tr>			    
		      	<tr>
		      		<td>商品图片</td>
		      		<td>
						<table>
							<tr>
								<td>
								<input type="file" id="file" />				                
					                <button class="btn btn-primary" type="button" @click="uploadFile()">
				                   		上传
					                </button>	
					            </td>
								<td>
									<img :src="image_entity.url" width="200px" height="200px">
								</td>
							</tr>						
						</table>
		      		</td>
		      	</tr>		      	
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success" @click="add_image_entity()" data-dismiss="modal" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>
</div>
<script type="text/javascript">

    var editor;
    KindEditor.ready(function(K) {
        editor = K.create('textarea[name="content"]', {
            allowFileManager : true
        });
    });

</script>
</body>
<script type="text/javascript" src="../js/controller/goodsController.js"></script>
<script type="text/javascript">
    var app = new Vue({
        //引入其它js变量
        mixins: [goodsControllerMixin],
        created: function(){
            //查询1级商品分类列表
            this.findItemCatListByParentId(0, "itemCatList1");

            //可能是修改
            this.findOne();
        }
    });
</script>
</html>